import React, {Component} from 'react';
import cs from 'classnames';
import BaseCmpt from '../BaseCmpt';
import './index.css';

class ShopInfo extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 101,
            isOnly: true,
            style: {
                marginBottom: '10px'
            },
            layout: {
                type: '' //默认空，column 竖排
            },
            dataset: {}
        }
    };


    constructor(props) {
        super(props);
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {style, dataset, layout} = data;

        layout = layout || {type: ''};

        return (
            <div onClick={(e) => {
                onSelected && onSelected(e)
            }}
                 className={cs({'shopInfo cmptEle': true, 'cmptEle_selected': selected, 'shopInfo_column': layout.type == 'column'})}
                 style={style}>

                <div className="shopInfo__logoWrap">
                    {
                        layout.type == 'column' ?
                            (
                                dataset.shopImg ?
                                    <img src={dataset.shopImg} className="shopInfo__banner"/>
                                    :
                                    <img src="/asset/admin/images/editor/shopInfo/banner.jpg"
                                         className="shopInfo__banner"/>
                            ) : null
                    }
                    <img src={dataset.logo} className="shopInfo__logo"/>
                </div>
                <div className="shopInfo__content">
                    <div className="shopInfo__name">{dataset.name}</div>

                    {
                        layout.type == 'column' && dataset.address ?
                            <div className="shopInfoItem">
                                <span className="shopInfoItem__icon shopInfoItem__icon_addr"></span>
                                <span className="shopInfoItem__text">{dataset.address}</span>
                                <span className="shopInfoItem__arrow"></span>
                            </div>
                            : null
                    }
                    {
                        dataset.time ?
                            <div className="shopInfoItem">
                                <span className="shopInfoItem__icon shopInfoItem__icon_time"></span>
                                <span className="shopInfoItem__text">{dataset.time}</span>
                            </div>
                            : null
                    }
                    {
                        dataset.phone ?
                            <div className="shopInfoItem">
                                <span className="shopInfoItem__icon shopInfoItem__icon_phone"></span>
                                <span className="shopInfoItem__text">{dataset.phone}</span>
                                {
                                    layout.type == 'column' ?
                                        <span className="shopInfoItem__arrow"></span>
                                        : null
                                }

                            </div>
                            : null
                    }
                    {
                        dataset.weixin ?
                            <div className="shopInfoItem">
                                <span className="shopInfoItem__icon shopInfoItem__icon_wx"></span>
                                <span className="shopInfoItem__text">{dataset.weixin}</span>
                                {
                                    layout.type == 'column' ?
                                        <span className="shopInfoItem__arrow"></span>
                                        : null
                                }

                            </div>
                            : null
                    }
                    {
                        dataset.qq ?
                            <div className="shopInfoItem">
                                <span className="shopInfoItem__icon shopInfoItem__icon_qq"></span>
                                <span className="shopInfoItem__text">{dataset.qq}</span>
                                {
                                    layout.type == 'column' ?
                                        <span className="shopInfoItem__arrow"></span>
                                        : null
                                }

                            </div>
                            : null
                    }
                    {
                        layout.type != 'column' && dataset.address ?
                            <div className="shopInfoItem">
                                <span className="shopInfoItem__icon shopInfoItem__icon_addr"></span>
                                <span className="shopInfoItem__text">{dataset.address}</span>
                            </div>
                            : null
                    }
                </div>
            </div>
        );
    }
}

export default ShopInfo;
